<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
      .image {
        display: block;
        margin-bottom: 40px;
        transition: filter 0.5s ease-out;
        filter: blur(10px);
      }
      .loaded {
        filter: blur(0);
      }
    </style>
  </head>
  <body>
    <img
      class="image"
      src="https://preview.cloud.189.cn/image/imageAction?param=1FD53D659803FDC30E2CAD621D58CEB10EFDC51A675C70BE2ADC4275F5B9163B4A91A106DD05FA87F456F54F1CA4A6D0F85A9EDA9BC505B9F66F1A5F69BDA82F8495EDD18D17CB84B9593F45D89470C6AC2AA6F9DDAD7D5EB31F11F39F24E1AFF5A75EF92305010BD19662B38448FD9887B569A8"
      data-src="https://preview.cloud.189.cn/image/imageAction?param=6A3C1623AC9456D53C637D19ADD8B42A0BBAB2259C27FD00A641B724E3E5C3CFC476EBA5FB4D01B69CF7E47EA857A25140AA072511A494947B03EE9B6CF0D8B474C79575464F56DD1998776B3C3EF0E465D42B560B4BBD02E008CD47F5F55ECB7398078EEE70AA0FAD05458AFFBE095D922EEDD8"
      alt="Image 1"
    />
    <img
      class="image"
      src="https://preview.cloud.189.cn/image/imageAction?param=1FD53D659803FDC30E2CAD621D58CEB10EFDC51A675C70BE2ADC4275F5B9163B4A91A106DD05FA87F456F54F1CA4A6D0F85A9EDA9BC505B9F66F1A5F69BDA82F8495EDD18D17CB84B9593F45D89470C6AC2AA6F9DDAD7D5EB31F11F39F24E1AFF5A75EF92305010BD19662B38448FD9887B569A8"
      data-src="https://preview.cloud.189.cn/image/imageAction?param=1BD11454D2C42C59904A867880CE5D785C53CEA5D991455D34CDCD2A2ED099D57DA8C591825363034A679C0FF2487ED91BA3CA4DC65BA9CE0C51C4B004BC7729F774996FFA10304F8A5FBCA663FE5B24D686FAA852F87DD7CD48845DC9658DD8F528DAA74F80C0A09BC6AF79E740E3B8A6101114"
      alt="Image 2"
    />
    <img
      class="image"
      src="https://preview.cloud.189.cn/image/imageAction?param=1FD53D659803FDC30E2CAD621D58CEB10EFDC51A675C70BE2ADC4275F5B9163B4A91A106DD05FA87F456F54F1CA4A6D0F85A9EDA9BC505B9F66F1A5F69BDA82F8495EDD18D17CB84B9593F45D89470C6AC2AA6F9DDAD7D5EB31F11F39F24E1AFF5A75EF92305010BD19662B38448FD9887B569A8"
      data-src="https://preview.cloud.189.cn/image/imageAction?param=3D46319E5A5F3282DDF6BA8445F12851FDFA31D614009B1D161B531894088A33DF8FF7E2A477E3B14C38A47323A18A3E9436613BFCCEBFA8988EF2C7F5524A1BC5E3CC22BF668F660CEB570D4D66297182FA0A442FC4AF0B7151B29BBDB4DD38B400B3648FBF0C8BFDEF286059ED0D07594C21E5"
      alt="Image 3"
    />
    <img
      class="image"
      src="https://preview.cloud.189.cn/image/imageAction?param=1FD53D659803FDC30E2CAD621D58CEB10EFDC51A675C70BE2ADC4275F5B9163B4A91A106DD05FA87F456F54F1CA4A6D0F85A9EDA9BC505B9F66F1A5F69BDA82F8495EDD18D17CB84B9593F45D89470C6AC2AA6F9DDAD7D5EB31F11F39F24E1AFF5A75EF92305010BD19662B38448FD9887B569A8"
      data-src="https://preview.cloud.189.cn/image/imageAction?param=683D457BB1D8703B17AF39ADB7D626FF442B5F585B5A6F739F02A7B8D722308A52D3CFA60DC415E4BD01066BB91FDD7BD9738DCBA0C7D75D55FB1AC664D4FEA82C2EEE6AFB7CCBA7708714073A6C9FCC2ADA4BB90DD4DD828A0822EA0F2D4711D80C0AC7378C4BEFB5839D577184CD84FF0182F3"
      alt="Image 4"
    />

    <script>
      const imageEls = document.querySelectorAll('.image');
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const img = entry.target;
            const src = img.getAttribute('data-src');
            img.setAttribute('src', src);
            img.classList.add('loaded');
            observer.unobserve(img);
          }
        });
      });
      imageEls.forEach((imageEl) => observer.observe(imageEl));
    </script>
  </body>
</html>
